<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            1、 float用于创建浮动框，将其移动到一边，
               直到左边缘（或者右边缘）触及大盒子的边框或者另一个浮动框的边缘，
               就停下浮动，挨着显示
            2、多个块级元素纵向排列就用标准流，横向排列就找浮动
        */
        /* 浮动三大特性：  1、脱离标准流的移动到指定位置（简称脱标），浮动的盒子不保留原先的盒子 ，其后面的标准流会来占用这个空的位置
                         2、如果多个盒子都设置了浮动，则会按照属性值在一行内显示并且顶端对齐排列
                            但是浮动的元素是互相贴合在一起的的（不会有哦缝隙），如果父元素宽度装不下这些浮动的盒子，那么装不下的会另起一行来显示对齐
                         3、浮动的元素具有行内块元素的特性，，比如span,若行内元素有了浮动，则不需要再转换成块级，就可以直接给宽度高度了
        */

        div {
            width: 100px;
            height: 100px;
            background-color: #cccccc;
            border: 1px solid #5311ee;
        }

        /* 2、如果多个盒子都设置了浮动，则会按照属性值在一行内显示并且顶端对齐排列 */
        .No1,
        .No2,
        .No3,
        .No4 {
            margin: 8px;
            float: left;
        }

        /* 1、体现第一个特性：No5不添加浮动，其余均添加，，则No5会顶到第一个位置，  其后面的标准流会来占用这个空的位置 */
        .No5 {
            width: 120px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="No1">第一个盒子</div>
    <div class="No2">第二个盒子</div>
    <div class="No3">第三个盒子</div>
    <div class="No4">第四个盒子</div>
    <div class="No5">第五个盒子</div>
</body>

</html>